<template>
    <div class="sbgl_wrap">
        <div class="page-content">
            <div class="top-panel">
                <div class="panel-item">
                    <div class="panel-item-stats">
                        <span>2639</span>
                        <span>台</span>
                        <img src="../../assets/images/sbgl/icon_arrow_1.png" alt="">
                    </div>

                    <div class="panel-item-contrast">
                        <span>+4台</span>
                        <span>同比上月</span>
                    </div>
                </div>
                <div class="panel-item">
                    <div class="panel-item-stats">
                        <span>2600</span>
                        <span>台</span>
                        <img src="../../assets/images/sbgl/icon_arrow_2.png" alt="">
                    </div>

                    <div class="panel-item-contrast">
                        <span>+8台</span>
                        <span>同比上月</span>
                    </div>
                </div>
                <div class="panel-item">
                    <div class="panel-item-stats">
                        <span>39</span>
                        <span>台</span>
                        <img src="../../assets/images/sbgl/icon_arrow_3.png" alt="">
                    </div>

                    <div class="panel-item-contrast">
                        <span>+2台</span>
                        <span>同比上月</span>
                    </div>
                </div>
                <div class="panel-item">
                    <div class="panel-item-stats">
                        <span>39</span>
                        <span>台</span>
                        <img class="is_decline" src="../../assets/images/sbgl/icon_arrow_4.png" alt="">
                    </div>

                    <div class="panel-item-contrast">
                        <span>-5台</span>
                        <span>同比上月</span>
                    </div>
                </div>
            </div>

            <div class="bottom-panel">
                <div class="header-box">
                    <el-select class="hy_select"  v-model="value" placeholder="设备类型">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                    <el-select class="hy_select"  v-model="value" placeholder="设备型号">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                    <el-select class="hy_select"  v-model="value" placeholder="是否在线">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>

                    <div class="btn-group">
                        <el-button class="hy_btn is_primary" type="primary" @click="btnClick()"><img src="../../assets/images/sbgl/icon_add.png" alt="" >新增</el-button>
                        <el-button class="hy_btn"><img src="../../assets/images/sbgl/icon_search.png" alt="">查询</el-button>
                        <el-button class="hy_btn"><img src="../../assets/images/sbgl/icon_reset.png" alt="">重置</el-button>
                        <el-button class="hy_btn"><img src="../../assets/images/sbgl/icon_export.png" alt="">导出</el-button>
                    </div>
                </div>

                <div class="table-box">
                    <el-table
                            :data="tableData"
                            class="hy_table"
                    >
                        <el-table-column
                                type="selection"
                                align="center"
                                width="120px">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="设备名称">
                        </el-table-column>
                        <el-table-column
                                prop="sign"
                                label="设备标识">
                        </el-table-column>
                        <el-table-column
                                prop="vendor"
                                label="设备厂商">
                        </el-table-column>
                        <el-table-column
                                prop="ip"
                                label="IP地址">
                        </el-table-column>
                        <el-table-column
                                prop="type"
                                label="设备类型">
                        </el-table-column>
                        <el-table-column
                                prop="model"
                                label="设备型号">
                        </el-table-column>
                        <el-table-column
                                prop="onLine"
                                width="120px"
                                label="是否在线">
                        </el-table-column>
                        <el-table-column
                                prop=""
                                width="120px"
                                label="操作">
                            <template slot-scope="scope">
                                <el-link type="primary">查看</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <el-pagination
                        class="hy-pagination"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        background
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next"
                        :total="50">
                </el-pagination>
            </div>

            <ControlDialog ref="controlDialog"
                           :dialogTitle="dialogTitle"
                           :fromList="fromList"
            ></ControlDialog>
        </div>
    </div>
</template>

<script>
    import ControlDialog from '../ControlDialog';

    export default {
        components: {
            ControlDialog,
        },
        data() {
            return {
                value: '',
                options: [],
                tableData: [
                    {
                        name: '18DAWDAS211293291',
                        sign: '2810321309DAFEWFE',
                        vendor: '某某某某某某公司',
                        ip: '192.168.1.9.2',
                        type: '某某某控制器',
                        model: '某某某控制器',
                        onLine: '是',
                    },
                    {
                        name: '18DAWDAS211293291',
                        sign: '2810321309DAFEWFE',
                        vendor: '某某某某某某公司',
                        ip: '192.168.1.9.2',
                        type: '某某某控制器',
                        model: '某某某控制器',
                        onLine: '是',
                    },
                    {
                        name: '18DAWDAS211293291',
                        sign: '2810321309DAFEWFE',
                        vendor: '某某某某某某公司',
                        ip: '192.168.1.9.2',
                        type: '某某某控制器',
                        model: '某某某控制器',
                        onLine: '是',
                    },
                    {
                        name: '18DAWDAS211293291',
                        sign: '2810321309DAFEWFE',
                        vendor: '某某某某某某公司',
                        ip: '192.168.1.9.2',
                        type: '某某某控制器',
                        model: '某某某控制器',
                        onLine: '是',
                    },
                    {
                        name: '18DAWDAS211293291',
                        sign: '2810321309DAFEWFE',
                        vendor: '某某某某某某公司',
                        ip: '192.168.1.9.2',
                        type: '某某某控制器',
                        model: '某某某控制器',
                        onLine: '是',
                    },
                    {
                        name: '18DAWDAS211293291',
                        sign: '2810321309DAFEWFE',
                        vendor: '某某某某某某公司',
                        ip: '192.168.1.9.2',
                        type: '某某某控制器',
                        model: '某某某控制器',
                        onLine: '是',
                    },
                    {
                        name: '18DAWDAS211293291',
                        sign: '2810321309DAFEWFE',
                        vendor: '某某某某某某公司',
                        ip: '192.168.1.9.2',
                        type: '某某某控制器',
                        model: '某某某控制器',
                        onLine: '是',
                    },
                    {
                        name: '18DAWDAS211293291',
                        sign: '2810321309DAFEWFE',
                        vendor: '某某某某某某公司',
                        ip: '192.168.1.9.2',
                        type: '某某某控制器',
                        model: '某某某控制器',
                        onLine: '是',
                    },
                    {
                        name: '18DAWDAS211293291',
                        sign: '2810321309DAFEWFE',
                        vendor: '某某某某某某公司',
                        ip: '192.168.1.9.2',
                        type: '某某某控制器',
                        model: '某某某控制器',
                        onLine: '是',
                    },
                    {
                        name: '18DAWDAS211293291',
                        sign: '2810321309DAFEWFE',
                        vendor: '某某某某某某公司',
                        ip: '192.168.1.9.2',
                        type: '某某某控制器',
                        model: '某某某控制器',
                        onLine: '是',
                    },
                    {
                        name: '18DAWDAS211293291',
                        sign: '2810321309DAFEWFE',
                        vendor: '某某某某某某公司',
                        ip: '192.168.1.9.2',
                        type: '某某某控制器',
                        model: '某某某控制器',
                        onLine: '是',
                    },
                ],
                currentPage: 1,
                dialogTitle: '新增设备',
                fromList: [
                    {
                        name: '设备名称',
                        type: 'input',
                        label: 'name',
                        isRules: true,
                    },
                    {
                        name: '设备标识',
                        type: 'input',
                        label: 'name',
                        isRules: true,
                    },
                    {
                        name: '设备厂商',
                        type: 'input',
                        label: 'name',
                        isRules: true,
                    },
                    {
                        name: 'IP地址',
                        type: 'input',
                        label: 'name',
                        isRules: true,
                    },
                    {
                        name: '设备类型',
                        type: 'input',
                        label: 'name',
                        isRules: true,
                    },
                    {
                        name: '设备型号',
                        type: 'input',
                        label: 'name',
                    },
                    {
                        name: '是否在线',
                        type: 'select',
                        label: 'name',
                        isRules: true,
                        option: [
                            {value: '1', label: '是'},
                            {value: '0', label: '否'},
                        ],
                    },
                ],
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },

            btnClick() {
                this.$refs.controlDialog.handleDisabled = false;
                this.$refs.controlDialog.dialogVisible = true;
            },
        },
        mounted() {

        }
    }
</script>

<style lang="less">
    .sbgl_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            padding-bottom: 28px;

            >.top-panel {
                height: 160px;
                margin-bottom: 28px;
                width: 100%;
                display: flex;
                justify-content: space-between;

                >.panel-item {
                    width: 375px;
                    height: 100%;
                    background-size: 100% 100%;
                    text-align: center;
                    padding-top: 65px;
                    box-sizing: border-box;

                    >.panel-item-stats {
                        font-size: 30px;
                        font-weight: 600;
                        line-height: 35px;
                        position: relative;

                        >span:nth-of-type( 2 ) {
                            font-size: 20px;
                            margin-left: 4px;
                            margin-right: 5px;
                        }

                        >img {
                            position: absolute;
                            top: 16px;

                            &.is_decline {
                                transform: rotate( 180deg );
                            }
                        }
                    }

                    >.panel-item-contrast {
                        font-size: 15px;
                        margin-top: 8px;

                        >span:nth-of-type( 1 ) {
                            margin-right: 8px;
                        }
                    }

                    &:nth-of-type( 1 ) {
                        background-image: url("../../assets/images/sbgl/bg_item_1.png");
                        color: #2C50EE;
                    }

                    &:nth-of-type( 2 ) {
                        background-image: url("../../assets/images/sbgl/bg_item_2.png");
                        color: #35C759;
                    }

                    &:nth-of-type( 3 ) {
                        background-image: url("../../assets/images/sbgl/bg_item_3.png");
                        color: #FF9500;
                    }

                    &:nth-of-type( 4 ) {
                        background-image: url("../../assets/images/sbgl/bg_item_4.png");
                        color: #FF4656;
                    }
                }
            }

            >.bottom-panel {
                width: 100%;
                min-height: 340px;
                padding: 37px 40px;
                box-sizing: border-box;
                background: #FFFFFF;
                border-radius: 8px;

                >.header-box {
                    width: 100%;
                    height: 32px;
                    margin-bottom: 32px;
                    line-height: 32px;
                    position: relative;

                    >.el-select {
                        margin-right: 16px;

                        .el-input__icon {
                            line-height: 32px;
                        }
                    }

                    >.btn-group {
                        position: absolute;
                        right: 0px;
                        top: -4px;

                        .el-button {

                            img {
                                position: relative;
                                top: -0.4px;
                            }
                        }

                        .el-button.hy_btn + .el-button.hy_btn {
                            margin-left: 16px;
                        }
                    }
                }

                >.table-box {
                    width: 100%;
                }
            }
        }
    }
</style>
